import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Play, Pause, RotateCcw, Volume2, VolumeX, Eye, Heart, Share2, Download, Star, Users, Clock } from 'lucide-react'
import { 
  JingMaskDecoration, 
  CloudDecoration, 
  WaveDecoration, 
  PlumDecoration,
  GuochaoBorder,
  TraditionalOrnament,
  OperaContainer,
  GuochaoIcon,
  TraditionalLine
} from '../components/OperaPatterns'

const InteractivePage = () => {
  const [currentScene, setCurrentScene] = useState(0)
  const [isPlaying, setIsPlaying] = useState(false)
  const [isMuted, setIsMuted] = useState(false)
  const [selectedCharacter, setSelectedCharacter] = useState('dan')

  const scenes = [
    {
      id: 0,
      title: '贵妃醉酒',
      description: '体验杨贵妃的内心世界，感受宫廷生活的繁华与孤独',
      character: 'dan',
      duration: '8分钟',
      difficulty: '初级',
      image: '👑',
      bgColor: 'from-pink-500 to-rose-500'
    },
    {
      id: 1,
      title: '霸王别姬',
      description: '感受项羽与虞姬的千古绝恋，体验英雄末路的悲壮',
      character: 'sheng',
      duration: '12分钟',
      difficulty: '中级',
      image: '⚔️',
      bgColor: 'from-red-500 to-orange-500'
    },
    {
      id: 2,
      title: '白蛇传',
      description: '跟随白素贞的脚步，体验人妖之恋的凄美传说',
      character: 'dan',
      duration: '15分钟',
      difficulty: '高级',
      image: '🐍',
      bgColor: 'from-green-500 to-teal-500'
    },
    {
      id: 3,
      title: '三打白骨精',
      description: '与孙悟空一起降妖除魔，体验西游路上的惊险刺激',
      character: 'sheng',
      duration: '10分钟',
      difficulty: '中级',
      image: '🐒',
      bgColor: 'from-yellow-500 to-orange-500'
    }
  ]

  const characters = [
    { id: 'dan', name: '旦角', description: '女性角色，温婉优雅', emoji: '👩', color: 'from-pink-400 to-rose-400' },
    { id: 'sheng', name: '生角', description: '男性角色，英俊潇洒', emoji: '👨', color: 'from-blue-400 to-indigo-400' },
    { id: 'jing', name: '净角', description: '花脸角色，威武雄壮', emoji: '🎭', color: 'from-red-400 to-orange-400' },
    { id: 'chou', name: '丑角', description: '喜剧角色，幽默风趣', emoji: '🤡', color: 'from-yellow-400 to-green-400' }
  ]

  const interactions = [
    { type: 'dialogue', text: '请选择您的回应方式...', options: ['温柔回应', '坚定回应', '沉默不语'] },
    { type: 'action', text: '请选择您的动作...', options: ['优雅转身', '深情凝视', '轻抚衣袖'] },
    { type: 'emotion', text: '请表达您的情感...', options: ['喜悦', '悲伤', '愤怒', '平静'] }
  ]

  const [currentInteraction, setCurrentInteraction] = useState(0)

  return (
    <div className="min-h-screen pt-16 theme-interactive">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <motion.div
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <motion.div
            className="mb-8"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <h1 className="text-6xl md:text-7xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
              情景式互动体验
            </h1>
            <div className="w-32 h-1 jing-gradient mx-auto mb-6 rounded-full"></div>
          </motion.div>
          
          <motion.p 
            className="text-xl md:text-2xl text-white/80 max-w-4xl mx-auto leading-relaxed jing-content"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >
            🎭 沉浸式体验京剧文化，与经典角色互动，感受传统艺术的魅力
            <br />
            🌟 穿越时空，与历史人物对话，体验千年文化的深厚底蕴
          </motion.p>
          
          {/* 装饰性元素 */}
          <motion.div
            className="flex justify-center items-center space-x-6 mt-8"
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.6 }}
          >
            <div className="text-3xl animate-float">👑</div>
            <div className="text-3xl animate-bounce-slow">⚔️</div>
            <div className="text-3xl animate-float animation-delay-400">🐍</div>
            <div className="text-3xl animate-bounce-slow animation-delay-600">🐒</div>
          </motion.div>
        </motion.div>

        <div className="grid lg:grid-cols-3 gap-8">
          {/* 场景选择 */}
          <motion.div
            className="lg:col-span-2"
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <div className="jing-card mb-6">
              <h2 className="text-2xl font-bold text-white mb-6">选择体验场景</h2>
              <div className="grid md:grid-cols-2 gap-4">
                {scenes.map((scene, index) => (
                  <motion.div
                    key={scene.id}
                    className={`p-6 rounded-xl border-2 cursor-pointer transition-all duration-300 ${
                      currentScene === scene.id
                        ? 'border-jing-red bg-jing-red/20'
                        : 'border-white/20 hover:border-white/40 hover:bg-white/5'
                    }`}
                    onClick={() => setCurrentScene(scene.id)}
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                  >
                    <div className="flex items-center space-x-4 mb-4">
                      <div className={`w-16 h-16 bg-gradient-to-r ${scene.bgColor} rounded-xl flex items-center justify-center text-3xl`}>
                        {scene.image}
                      </div>
                      <div className="flex-1">
                        <h3 className="text-xl font-bold text-white mb-1">{scene.title}</h3>
                        <div className="flex items-center space-x-4 text-sm text-white/60">
                          <span className="flex items-center">
                            <Clock size={14} className="mr-1" />
                            {scene.duration}
                          </span>
                          <span className="flex items-center">
                            <Star size={14} className="mr-1" />
                            {scene.difficulty}
                          </span>
                        </div>
                      </div>
                    </div>
                    <p className="text-white/70 text-sm leading-relaxed">{scene.description}</p>
                  </motion.div>
                ))}
              </div>
            </div>

            {/* 角色选择 */}
            <div className="jing-card mb-6">
              <h3 className="text-2xl font-bold text-white mb-6">选择您的角色</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {characters.map((character) => (
                  <motion.button
                    key={character.id}
                    onClick={() => setSelectedCharacter(character.id)}
                    className={`p-4 rounded-lg border-2 transition-all duration-300 ${
                      selectedCharacter === character.id
                        ? 'border-jing-red bg-jing-red/20'
                        : 'border-white/20 hover:border-white/40'
                    }`}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                  >
                    <div className={`w-12 h-12 bg-gradient-to-r ${character.color} rounded-lg flex items-center justify-center text-2xl mb-3 mx-auto`}>
                      {character.emoji}
                    </div>
                    <h4 className="text-white font-semibold text-sm mb-1">{character.name}</h4>
                    <p className="text-white/60 text-xs">{character.description}</p>
                  </motion.button>
                ))}
              </div>
            </div>

            {/* 互动区域 */}
            <div className="jing-card">
              <h3 className="text-2xl font-bold text-white mb-6">互动体验</h3>
              
              {/* 场景展示 */}
              <div className="relative mb-6">
                <div className={`w-full h-64 bg-gradient-to-r ${scenes[currentScene].bgColor} rounded-xl flex items-center justify-center text-6xl mb-4`}>
                  {scenes[currentScene].image}
                </div>
                <div className="absolute top-4 right-4 flex space-x-2">
                  <button 
                    onClick={() => setIsMuted(!isMuted)}
                    className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all"
                  >
                    {isMuted ? <VolumeX size={20} className="text-white" /> : <Volume2 size={20} className="text-white" />}
                  </button>
                  <button className="p-2 glass-effect rounded-lg hover:bg-white/20 transition-all">
                    <RotateCcw size={20} className="text-white" />
                  </button>
                </div>
              </div>

              {/* 对话/互动 */}
              <div className="space-y-4">
                <div className="glass-effect p-4 rounded-lg">
                  <p className="text-white/80 mb-4">{interactions[currentInteraction].text}</p>
                  <div className="flex flex-wrap gap-2">
                    {interactions[currentInteraction].options.map((option, index) => (
                      <motion.button
                        key={index}
                        className="px-4 py-2 bg-jing-red/20 border border-jing-red/50 rounded-lg text-white hover:bg-jing-red/30 transition-all"
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        onClick={() => setCurrentInteraction((currentInteraction + 1) % interactions.length)}
                      >
                        {option}
                      </motion.button>
                    ))}
                  </div>
                </div>

                {/* 控制按钮 */}
                <div className="flex items-center justify-center space-x-4">
                  <button 
                    onClick={() => setIsPlaying(!isPlaying)}
                    className="p-4 jing-gradient rounded-full hover:scale-110 transition-all"
                  >
                    {isPlaying ? <Pause size={24} className="text-white" /> : <Play size={24} className="text-white" />}
                  </button>
                </div>
              </div>
            </div>
          </motion.div>

          {/* 侧边栏 */}
          <motion.div
            className="space-y-6"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
          >
            {/* 当前场景信息 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">当前场景</h3>
              <div className="space-y-4">
                <div className="flex items-center space-x-3">
                  <div className={`w-12 h-12 bg-gradient-to-r ${scenes[currentScene].bgColor} rounded-lg flex items-center justify-center text-2xl`}>
                    {scenes[currentScene].image}
                  </div>
                  <div>
                    <h4 className="text-white font-semibold">{scenes[currentScene].title}</h4>
                    <p className="text-white/60 text-sm">{scenes[currentScene].duration}</p>
                  </div>
                </div>
                <p className="text-white/70 text-sm">{scenes[currentScene].description}</p>
              </div>
            </div>

            {/* 进度 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">体验进度</h3>
              <div className="space-y-3">
                <div className="flex justify-between text-sm text-white/60">
                  <span>当前进度</span>
                  <span>25%</span>
                </div>
                <div className="w-full bg-white/20 rounded-full h-2">
                  <div className="w-1/4 h-full jing-gradient rounded-full"></div>
                </div>
                <div className="text-sm text-white/60">
                  预计剩余时间: 6分钟
                </div>
              </div>
            </div>

            {/* 操作按钮 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">操作</h3>
              <div className="space-y-3">
                <button className="w-full flex items-center justify-center space-x-2 jing-button">
                  <Download size={18} />
                  <span>保存体验</span>
                </button>
                <button className="w-full flex items-center justify-center space-x-2 glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all">
                  <Share2 size={18} />
                  <span>分享体验</span>
                </button>
                <button className="w-full flex items-center justify-center space-x-2 glass-effect px-4 py-3 rounded-lg text-white hover:bg-white/20 transition-all">
                  <Heart size={18} />
                  <span>收藏场景</span>
                </button>
              </div>
            </div>

            {/* 成就系统 */}
            <div className="jing-card">
              <h3 className="text-xl font-bold text-white mb-4">成就</h3>
              <div className="space-y-3">
                <div className="flex items-center space-x-3 p-3 glass-effect rounded-lg">
                  <div className="w-8 h-8 bg-jing-gold rounded-full flex items-center justify-center">
                    <Star size={16} className="text-white" />
                  </div>
                  <div>
                    <p className="text-white font-medium text-sm">初次体验</p>
                    <p className="text-white/60 text-xs">完成第一个场景</p>
                  </div>
                </div>
                <div className="flex items-center space-x-3 p-3 glass-effect rounded-lg opacity-50">
                  <div className="w-8 h-8 bg-jing-red rounded-full flex items-center justify-center">
                    <Users size={16} className="text-white" />
                  </div>
                  <div>
                    <p className="text-white font-medium text-sm">角色大师</p>
                    <p className="text-white/60 text-xs">体验所有角色类型</p>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

export default InteractivePage
